var CanvasRender = Class.create({
  Extends: Render,
  constructor: function(properties) {
    //调用父类的构造函数
    CanvasRender.supperclass.constructor.call(this, properties);
    this.context = this.canvas.getContext("2d");
    this.renderType = "canvas";
  },
  startDraw: function(target) {
    if (target.visible && target.alpha > 0) {
      if (this.target === this.stage) {
        this.context.clearRect(0, 0, target.width, target.height);
      }
      //已经画在画布上面的我们叫做dest 目标
      //准备画在画布上面我们叫做src 源
      //一般来说，blendmode默认为源（我们可以设置以目标为基准）
      if (target.blendMode != this.blendMode) {
        this.context.globalCompositeOperation = this.blendMode =
          target.blendMode;
      }
      this.context.save();
      return true;
    }
    return false;
  },
  draw: function(target) {
    var ctx = this.context,
      w = target.width,
      h = target.height;

    var bg = target.background;
    if (bg) {
      ctx.fillStyle = bg;
      ctx.fillRect(0, 0, w, h);
    }

    var drawable = target.drawable,
      image = drawable && drawable.image;
    if (img) {
      var rect = drawable.rect;
      var sw = rect[2];
      var sh = rect[3];
      var offsetX = rect[4];
      var offsetY = rect[5];
      if (!sw || !sh) {
        return;
      }
      if (!w && !h) {
        w = target.width = sw;
        h = target.height = sh;
      }
      if (offsetX || offsetY)
        ctx.translate(offsetX - sw * 0.5, offsetY - sh * 0.5);
      ctx.drawImage(image, rect[0], rect[1], sw, sh, 0, 0, w, h);
    }
  },
  endDraw:function(target){
      this.context.restore();
  }
});
